<template>
    <a-drawer class="" width="500" :get-container="false" :closable="false" v-model:visible="PluginStatus">
        <div class="pluginList scroll">
            <a-spin :spinning="spinning" tip="Loading...">
                <a-empty v-if="!PluginList.length" />
                <PlugInItem v-for="item in PluginList" :detail="item" />
            </a-spin>
        </div>
    </a-drawer>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import PlugInItem from './PlugInItem.vue';
const store = useStore();
const spinning = ref(false);
const PluginStatus = computed({
    get: () => store.state.PluginStatus,
    set: val => {
        store.commit('ChangePluginDrawer', val)
    }
});
const PluginList = computed(() => store.state.PluginList)



</script>
<style scoped>
:deep(.ant-drawer-body) {
    height: 100%;
    padding: 0;
}
:deep(.ant-spin-nested-loading){
    height: 100%;
}

:deep(.ant-empty) {
    height: 100%;
    padding: 100px 0 0 0;
}

.pluginList {
    height: 100%;
}
</style>
